<template>
	<div class="homeBox">
		<!-- <gpy-ceshi fatherCom="workersAdd"></gpy-ceshi> -->
		<home-header class="header" :data="data"></home-header>
		<div class="body">
			<home-left class="left" :att="att"></home-left>
			<home-right class="right" :project="project" :age="age" :team="team"></home-right>
		</div>
	</div>
</template>

<script>
	import gpyCeshi from '../workers/list/gpy_ceshi.vue'
	import homeHeader from './homeHeader.vue'
	import homeLeft from './homeLeft.vue'
	import homeRight from './homeRight.vue'
	import {
		post
	} from '../../api/myFunction.js'
	export default {
		name: 'userHome',
		data() {
			return{
				data:{
					entNum: 0,
					teamNum: 0,
					workerNum: 0,
					attNum: 0,
				},
				att: [],
				project: {},
				age: [],
				team: [],
			}
		},
		components: {
			gpyCeshi,
			homeHeader,
			homeLeft,
			homeRight
		},
		mounted() {
			this.initData()
		},
		methods: {
			initData: function() {
				var that = this
				post(this, 'GET', 'home', {}, function(res) {
					that.data.entNum = res.data.num.entNum
					that.data.teamNum = res.data.num.teamNum
					that.data.workerNum = res.data.num.workerNum
					that.data.attNum = res.data.num.attNum
					
					that.project = res.data.project
					that.att = res.data.att
					
					that.age = res.data.age
					that.team = res.data.team
				}, function(err) {
					console.log(err)
				})
			},
		}
	}
</script>

<style scoped>
	.homeBox {
		width: 100%;
		height: calc(100vh - 50px - 34px);
		min-width: 1500px;
		min-height: 800px;
		display: flex;
		flex-direction: column;
		padding: 20px;
	}

	.header {
		height: 182px;
		width: 100%;
		background-color: #fff;
	}

	.body {
		flex: 1;
		width: 100%;
		display: flex;
	}

	.left {
		width: 30%;
		margin-right: 20px;
		height: 100%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);
		box-sizing: border-box;
		padding: 10px;
		/* background-color: #f3f3f3; */
	}

	.right {
		flex: 1;
		height: 100%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);
		box-sizing: border-box;
	}
</style>
